<template>
	<PageContainer :name="article.title">
		<view class="found-detail-container">
			<view class="article-title u-line-1">{{article.title}}</view>
			<view class="article-summary u-line-3">{{article.summary}}</view>
			<view class="article-text flex-row-between">
				<view>
					<text class="label">来自</text>
					<text>{{article.source}}</text>
				</view>
				<view>
					<text class="label">{{article.createTime}}</text>
					<text>发布</text>
				</view>
			</view>
			<rich-text :nodes="article.contents"></rich-text>
		</view>
	</PageContainer>
</template>

<script>
	import dayjs from 'dayjs';
	import PageContainer from '../../../components/PageContainer/PageContainer.vue';
	import {
		getArticleById
	} from '@/api/cms/article.js';
	import {
		formatRichText
	} from '@/utils/format.js';
	export default {
		components: {
			PageContainer
		},
		data() {
			return {
				article: {},
			}
		},
		methods: {
			async articleById(id) {
				const result = await getArticleById(id);
				const article = result.data || {};
				article.createTime = dayjs(article.createTime).format('YYYY-MM-DD HH:MM');
				// 格式化富文本内容（样式调整）
				article.contents = formatRichText(article.contents);
				this.article = article;
			}
		},
		onLoad(params) {
			this.articleById(params.id);
		}
	}
</script>

<style scoped lang="scss">
	.found-detail-container {
		padding: 30rpx 0;

		.article-title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}

		.article-summary {
			margin: 20rpx 0;
		}

		.article-text {
			margin-bottom: 30rpx;
			color: #999;
			font-size: 30rpx;

			.label {
				margin-right: 16rpx;
			}
		}
	}
</style>